<template>
  <div id="globalheader">
    <a-row :wrap="false">
      <!-- 标题栏 -->
      <a-col flex="200px">
        <RouterLink to="/">
          <div class="title-bar">
            <img src="../assets/logo3.jpg" alt="logo" class="logo" />
            <div class="title">创新服务平台</div>
          </div>
        </RouterLink>
      </a-col>
      <!-- 菜单 -->
      <a-col flex="auto">
        <div class="menu">
          <a-menu
            v-model:selectedKeys="current"
            mode="horizontal"
            :items="items"
            @click="doMenuClick"
          />
        </div>
      </a-col>

      <!-- 登录信息 -->
      <a-col flex="100px">
        <div class="user-login-status">
          <div v-if="loginUser.userInfo">
            <a-dropdown :trigger="['click']">
              <a class="ant-dropdown-link" @click.prevent>
                <a-avatar
                  :size="48"
                  shape="square"
                  :src="loginUser.userInfo?.data.avatarUrl || ''"
                  :alt="loginUser.userInfo?.data.name || '用户头像'"
                />
                {{ loginUser.userInfo?.data.name || '还没有名字' }}
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item @click="doLogout">
                    <LogoutOutlined />
                    退出登录
                  </a-menu-item>
                  <a-menu-item>
                    <router-link to="/user/profile">
                      <UserOutlined />
                      个人中心
                    </router-link>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <div v-else>
            <a-button type="primary" href="/user/login" style="background-color: #2ccfb6"
              >登录</a-button
            >
          </div>
          <!-- <a-button href="/user/register">注册</a-button> -->
        </div>
      </a-col>
    </a-row>
  </div>
</template>
  <script lang="ts" setup>
import { computed, h, ref } from 'vue'
import {
  MailOutlined,
  AppstoreOutlined,
  FileAddOutlined,
  // SettingOutlined,
  HomeOutlined,
  LogoutOutlined,
  UserOutlined,
} from '@ant-design/icons-vue'
import { MenuProps, message } from 'ant-design-vue'
import router from '../router'
import { useUserStore } from '../stores/user'

const current = ref<string[]>([])
const loginUser = useUserStore()

// const items = ref<MenuProps['items']>()
const originItems = [
  {
    key: '/',
    icon: () => h(HomeOutlined),
    label: '首页',
    title: '首页',
  },
  {
    key: '/teacher/InnovationActitiesPage',
    label: '创新活动',
    title: '创新活动',
    icon: () => h(AppstoreOutlined),
  },
  {
    key: '/teacher/PushActitiesPage',
    label: '发布活动',
    title: '发布活动',
    icon: () => h(FileAddOutlined),
  },

  {
    key: '/student/InnovationActitiesPage',
    label: '创新活动',
    title: '创新活动',
    icon: () => h(AppstoreOutlined),
  },
  {
    key: '/student/findTeamPage',
    label: '寻找队伍',
    title: '寻找队伍',
    icon: () => h(AppstoreOutlined),
  },
  {
    key: '/AIAssistantPage',
    label: 'AI小助手',
    title: 'AI小助手',
    icon: () => h(MailOutlined),
  },
]

//路由跳转事件
const doMenuClick = ({ key }) => {
  router.push({
    path: key,
  })
}
//路由监听事件
router.afterEach((to, from) => {
  current.value = [to.path]
})

//退出登录函数
const doLogout = async () => {
  await loginUser.logout()
  message.success('退出登录成功')
  router.replace('/user/login')
}

/* 根据用户角色过滤菜单
如果登录用户是学生, 则过滤掉带有teacher路径的菜单
如果登录用户是老师, 则过滤掉带有student路径的菜单
如果用户未登录, 则不显示带角色的菜单
*/
const filterMenu = (menus = [] as MenuProps['items']) => {
  return menus?.filter((item) => {
    //TODO 未登录的菜单(待优化)
    if (!loginUser.userInfo) {
      if (item?.key?.startsWith('/teacher') || item?.key?.startsWith('/student')) {
        return false
      }
      return true
    }
    // 用户是学生只能看到含有/student的菜单
    //用户是教师才能看到含有/teacher开头的菜单
    if (loginUser.userInfo.data.isTeacher === 0) {
      // 学生
      if (item?.key?.startsWith('/student')) {
        return true
      }
      // 学生不能看到教师相关的菜单
      if (item?.key?.startsWith('/teacher')) {
        return false
      }
      // 学生可以看其他通用菜单
      return true
    }

    // 用户是教师只能看到含有/teacher的菜单
    if (loginUser.userInfo.data.isTeacher === 1) {
      // 教师
      if (item?.key?.startsWith('/teacher')) {
        return true
      }
      // 教师不能看到学生相关的菜单
      if (item?.key?.startsWith('/student')) {
        return false
      }
      // 教师可以看其他通用菜单
      return true
    }
    return true
  })
}

//展示在菜单的路由数组  动态路由
const items = computed(() => {
  return filterMenu(originItems)
})
</script>

  <style scoped>
#globalheader {
  padding: 0 120px;
  background-color: #fff;
  border-bottom: 1px solid #e8e8e8;
}

#globalheader .title-bar {
  display: flex;
  align-items: center;
}

.logo {
  height: 35px;
}

.title {
  color: black;
  font-size: 20px;
  margin-left: 16px;
}

.menu {
  display: flex;
  justify-content: center;
}

/* 菜单选中状态样式 */
:deep(.ant-menu-horizontal:not(.ant-menu-dark)) .ant-menu-item-selected {
  color: #2ccfb6;
  border-bottom-color: #2ccfb6;
}

/* 菜单悬浮状态样式 */
:deep(.ant-menu-horizontal:not(.ant-menu-dark)) .ant-menu-item:hover {
  color: #2ccfb6;
}

/* 菜单项下划线样式 */
/* :deep(.ant-menu-light.ant-menu-horizontal >.ant-menu-item::after) {
  border-bottom-color: #2ccfb6;
} */
:deep(.ant-menu-horizontal >.ant-menu-item-selected::after) {
  border-bottom-color: #2ccfb6;
}

</style>
